.pure-popup {
    position: fixed;
    display: var(--pure-popup-display, none);
    flex-direction: column;
    transition-property: all;
    transition-duration: var(--pure-popup-transition-duration, 0.3s);
    transition-timing-function: var(--pure-popup-transition-timing-function, ease-in-out);
    z-index: var(--pure-popup-z-index, var(--pure-z-index-upper));
    margin: var(--window-top) 0 var(--window-bottom) 0;
    box-sizing: border-box;
    left: var(--pure-popup-left, 50%);
    top: var(--pure-popup-top, 50%);
    right: var(--pure-popup-right, auto);
    bottom: var(--pure-popup-bottom, auto);
    transform: var(--pure-popup-transform, translate(-50%, -50%));
    width: var(--pure-popup-width, 100%);
    max-width: var(--pure-popup-max-width, 75%);
    height: var(--pure-popup-height, auto);
    max-height: var(--pure-popup-max-height, 40%);
    padding: var(--pure-popup-padding, 0);
    background: var(--pure-popup-background, var(--pure-background-element));
    opacity: var(--pure-popup-opacity, 0);
    border-radius: var(--pure-popup-border-radius, 5px);

    /* #ifdef MP-XHS */
    height: var(--pure-popup-height, 40vh);
    max-height: var(--pure-popup-max-height, none);
    /* #endif */
}

.pure-popup-close {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    line-height: 1;
    top: var(--pure-popup-close-top, 10px);
    right: var(--pure-popup-close-right, 10px);
    left: var(--pure-popup-close-left, auto);
    bottom: var(--pure-popup-close-bottom, auto);
    z-index: 2;
    font-size: var(--pure-popup-close-font-size, var(--pure-font-size-larger));
    font-weight: var(--pure-popup-close-font-weight, 600);
    color: var(--pure-popup-close-color);
    cursor: pointer;
    background: var(--pure-popup-close-background);
    border-radius: var(--pure-popup-close-border-radius);
    border: var(--pure-popup-close-border);
    width: var(--pure-popup-close-width);
    height: var(--pure-popup-close-height);
    padding: var(--pure-popup-close-padding);
    box-sizing: border-box;
    transform: var(--pure-popup-close-transform);
}

.pure-popup-header {
    width: 100%;
    flex-shrink: 0;
    box-sizing: border-box;
    padding: var(--pure-popup-header-padding, 15px);
    font-size: var(--pure-popup-header-font-size);
    font-weight: var(--pure-popup-header-font-weight);
    color: var(--pure-popup-header-color);
    text-align: var(--pure-popup-header-text-align);
    border-style: var(--pure-popup-header-border-style, solid);
    border-color: var(--pure-popup-header-border-color, var(--pure-border-color-default));
    border-top-width: var(--pure-popup-header-border-top-width, 0);
    border-bottom-width: var(--pure-popup-header-border-bottom-width, 1px);
    border-left-width: var(--pure-popup-header-border-left-width, 0);
    border-right-width: var(--pure-popup-header-border-right-width, 0);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-direction: row;
    position: relative;
    height: var(--pure-popup-header-height);
}

.pure-popup-title {
    margin: var(--pure-popup-title-margin);
    padding: var(--pure-popup-title-padding);
    font-size: var(--pure-popup-title-font-size);
    font-weight: var(--pure-popup-title-font-weight);
    color: var(--pure-popup-title-color);
    text-align: var(--pure-popup-title-text-align);
    flex: 1;
}

.pure-popup-button {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: var(--pure-popup-button-font-size);
    font-weight: var(--pure-popup-button-font-weight, 500);
}

.pure-popup-button-cancel {
    color: var(--pure-popup-button-cancel-color, var(--pure-text-color-regular));
    left: var(--pure-popup-button-cancel-left, 15px);
}

.pure-popup-button-confirm {
    color: var(--pure-popup-button-confirm-color, var(--pure-theme-primary));
    right: var(--pure-popup-button-cancel-right, 15px);
}

.pure-popup-body {
    width: 100%;
    flex-grow: 1;
    overflow: hidden;
    display: flex;
    flex-direction: row;
    align-items: stretch;
    background: var(--pure-popup-body-background);
}

.pure-popup-scroll-view {
    width: 100%;
    flex-grow: 1;
}


.pure-popup-footer {
    width: 100%;
    flex-shrink: 0;
    box-sizing: border-box;
    padding: var(--pure-popup-footer-padding, 10px 15px);
    font-size: var(--pure-popup-footer-font-size);
    font-weight: var(--pure-popup-footer-font-weight);
    color: var(--pure-popup-footer-color);
    text-align: var(--pure-popup-footer-text-align);
    border-style: var(--pure-popup-footer-border-style, solid);
    border-color: var(--pure-popup-footer-border-color, var(--pure-border-color-default));
    border-top-width: var(--pure-popup-footer-border-top-width, 1px);
    border-bottom-width: var(--pure-popup-footer-border-bottom-width, 0);
    border-left-width: var(--pure-popup-footer-border-left-width, 0);
    border-right-width: var(--pure-popup-footer-border-right-width, 0);
}

.pure-popup-before-hide {
    --pure-popup-opacity: var(--pure-popup-content-before-hide-opacity, 1);
    --pure-popup-transform: var(--pure-popup-content-before-hide-transform);
    --pure-popup-display: flex;
}

.pure-popup-to-hide {
    --pure-popup-opacity: var(--pure-popup-content-to-hide-opacity, 0);
    --pure-popup-transform: var(--pure-popup-content-to-hide-transform);
    --pure-popup-display: flex;
}

.pure-popup-hide {
    --pure-popup-opacity: var(--pure-popup-content-hide-opacity, 0);
    --pure-popup-transform: var(--pure-popup-content-hide-transform);
    --pure-popup-display: none;
}

.pure-popup-before-show {
    --pure-popup-opacity: var(--pure-popup-content-before-show-opacity, 0);
    --pure-popup-transform: var(--pure-popup-content-before-show-transform);
    --pure-popup-display: flex;
}

.pure-popup-to-show {
    --pure-popup-opacity: var(--pure-popup-content-to-show-opacity, 1);
    --pure-popup-transform: var(--pure-popup-content-to-show-transform);
    --pure-popup-display: flex;
}

.pure-popup-show {
    --pure-popup-opacity: var(--pure-popup-content-show-opacity, 1);
    --pure-popup-transform: var(--pure-popup-content-show-transform);
    --pure-popup-display: flex;
}
